<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
<div>只要组件中声明了props，那么它的父组件就可以通过props将数据传递下来。props只是个数据接入口，声明之后和普通的 html 属性一样使用:</div>

<div id="app">
    <!--直接传递尼玛的值-->
    <tao nima="豌豆荚"></tao>

    <!--使用绑定的方式,传递nima的值-->
    <tao v-bind:nima="wangdoujia"></tao>
</div>

<script>
    <!--全局组件没有s-->
    Vue.component("tao",
        {
            props: {"nima": String},
            template: "<div>输出nima的值：{{nima}}</div>"
        }
    );

    var v = new Vue({
        el: "#app",
        data: {
            wangdoujia: "我是另一个豌豆荚"
        }
    })

    setTimeout(()=> {

        v.wandoujia = "豌豆荚发生了改变"
        
    },1500)
</script>
</body>
</html>